<template>
    <!-- tabs的组件封装 -->
    <!-- <div class="tabsBox">
    <div v-for="item in tabsList" :key="item.m_id">{{item.m_name}}</div>
  </div> -->
    <div class="tabsBox">
        <div @click="leftSlide" class="left-btn border-right">
            <i class="el-icon-d-arrow-left"></i>
        </div>
        <div class="scroll_wrapper" ref="wrapperCon">
            <div class="tabslist">
                <div
                    :class="tabsId == item.m_id ? 'tabsItem tabs-active' : 'tabsItem'"
                    :style="{paddingRight:!item.noClose?'25px':'5px'}"
                    v-for="(item, index) in tabsList"
                    :key="index"
                    @click="changeTab(item)"
                >
                    {{ item.m_name }}
                    <div v-if="!item.noClose" @click.stop="closeItem(item)" class="close-btn">
                        <i class="el-icon-error"></i>
                    </div>
                </div>
            </div>
        </div>
        <div @click="rightSlide" class="right-btn border-left border-right">
            <i class="el-icon-d-arrow-right"></i>
        </div>
        <div @click="closeAll" class="right-btn border-right">
            <i class="el-icon-refresh"></i>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    computed:{
      tabsList(){
          return this.$store.state.tabsList
        },
      tabsId(){
          return this.$store.state.tabsId
        }
    },
    watch:{
        tabsList:{
            handler (newValue, oldValue,e) {
                if(!(newValue<oldValue)){
                    window.setTimeout(()=>{
                        this.$refs.wrapperCon.scrollLeft = 9999
                    },10)
                }
            },
            deep: true // 开启深度监听
        },
    },
    mounted(){
        eventBus.$on('changeCity',()=>{
            this.closeAll()
        })
    },
    methods: {
      //保存tabsId
      preserveTabsId(data){
        let tabsData=this.tabsList.filter(item=>{return item.m_id==data})[0]
        this.$router.push({ name: tabsData.route});
        this.$store.commit('editTabsId',data);
      },
      //保存tabsList
      preserveTabsList(data){
        this.$store.commit('editTabsList',data);
      },
        // 左箭头
        leftSlide() {
            // 保存滚动盒子左侧已滚动的距离
            let left = this.$refs.wrapperCon.scrollLeft;
            let num = 0;
            clearInterval(this.timer);
            this.timer = null;
            this.timer = setInterval(() => {
                //   !left:已经滚动到最左侧
                //   一次性滚动距离（可调节）
                if (!left || num >= 300) {
                    // 停止滚动
                    clearInterval(this.timer);
                    this.timer = null;
                    return;
                }
                // 给滚动盒子元素赋值向左滚动距离
                this.$refs.wrapperCon.scrollLeft = left -= 30;
                // 保存向左滚动距离（方便判断一次性滚动多少距离）
                num += 30;
            }, 20);
            // 20：速度（可调节）
        },
        // 右箭头
        rightSlide() {
            // 保存滚动盒子左侧已滚动的距离
            let left = this.$refs.wrapperCon.scrollLeft;
            // 保存元素的整体宽度
            let scrollWidth = this.$refs.wrapperCon.scrollWidth;
            // 保存元素的可见宽度
            let clientWidth = this.$refs.wrapperCon.clientWidth;
            let num = 0;
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                // 已经滚动距离+可见宽度
                // left+clientWidth>=scrollWidth：滚动到最右侧
                // num>=300一次性滚动距离
                if (left + clientWidth >= scrollWidth || num >= 300) {
                    clearInterval(this.timer);
                    return;
                }
                // 给滚动盒子元素赋值向左滚动距离
                this.$refs.wrapperCon.scrollLeft = left += 30;
                // 保存向左滚动距离（方便判断一次性滚动多少距离）
                num += 30;
            }, 20);
            // 20：速度（可调节）
        },
        closeItem(data){
          let arr=JSON.parse(JSON.stringify(this.tabsList))
          let Index=arr.findIndex(item=>{return item.m_id==data.m_id})
          arr.splice(Index,1)
          this.preserveTabsId(arr[Index-1].m_id)
          this.preserveTabsList(arr)
        },
        closeAll(){
          this.preserveTabsId(0)
          this.preserveTabsList([
              { m_id: 0, m_name: this.$t('main.home'), route: 'Home',noClose:true }
          ])
        },
        changeTab(data) {
            this.preserveTabsId(data.m_id)
        }
    }
};
</script>

<style scoped lang="less">
.tabsBox {
    box-sizing: border-box;
    font-size: 14px;
    color: #444;
    display: flex;
    border: 1px solid #f1f1f1;
    cursor: pointer;
    .scroll_wrapper {
        width: calc(100% - 115px);
        overflow-x: scroll;
        margin: 0 5px;
        .tabslist {
            padding: 0 10px;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            .tabsItem {
                height: 28px;
                border: 1px solid #ccc;
                box-sizing: border-box;
                border-radius: 4px;
                padding: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                white-space: nowrap; //禁止文字换行
                position: relative;
                .close-btn {
                    position: absolute;
                    top: 7px;
                    right: 5px;
                    font-size: 14px;
                }
            }
            .tabs-active {
                color: #fff;
                background-color: #6c9ee5 ;
            }
        }
    }
}

.left-btn,
.right-btn {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
.border-left {
    border-left: 1px solid #ccc;
}
.border-right {
    border-right: 1px solid #ccc;
}
/*隐藏滚动条*/
.scroll_wrapper::-webkit-scrollbar {
    display: none;
}
</style>